<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>文件管理</title>
  <script src="../../../static/kaige/js/szload.js"></script>
  <style>
    .lefttable .layui-table-tool .layui-table-tool-self {
      display: none;
    }

    .lefttable .layui-table-tool .layui-table-tool-temp {
      padding-right: 10px;
    }
   .kaige-body-form .layui-form-item .layui-form-mid{padding-left: 10px !important;}
   .file_table_img {
      max-width: 30px;
      max-height: 30px;
      border: 0;
    }
  </style>
</head>

<body>
  <div class="kaige-body kaige-btn-radius">
    <div class="layui-row layui-col-space10">
      <div class="layui-col-md3 lefttable">
        <table class="layui-table" id="folderTypeTable" lay-filter="folderTypeTable"></table>
      </div>
      <div class="layui-col-md9">
        <table class="layui-table" id="pageTable" lay-filter="pageTable"></table>
      </div>
    </div>
  </div>
  <script>
    load_init_js(function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
      }).use(['kaige'], function () {
        var form = layui.form, table = layui.table, kaige = layui.kaige, element = layui.element, treeTable = layui.treeTable;
        //系统默认图片
        window.default_image = szoapcpath + "/static/img/default.png";
        //查看图片
        window.viewImage = function (imgUrl) { kaige.viewimage({ maxwidth: 600, maxheight: 600, url: imgUrl }); }

        var loadnum = 0;
        treeTable.render({
          elem: "#folderTypeTable",
          id: "IDfolderTypeTable",
          url: "/sys.FolderType/index",
          toolbar: '#TPL-treeTable-header',
          defaultToolbar: false,
          height: 'full-35',
          cols: [[
            { field: 'name', title: '文件夹名称', minWidth: 150 },
            { fixed: "right", title: "操作", width: 120, align: "center", toolbar: "#TPL-treeTable-tdbar" },
          ]],
          page: false,
          tree: {
            view: { expandAllDefault: true, showIcon: false }
          },
        });

        // 表头工具栏工具事件
        treeTable.on("toolbar(folderTypeTable)", function (obj) {
          // 获取选中行
          switch (obj.event) {
            case "open-all":
              treeTable.expandAll('IDfolderTypeTable', true); // 展开全部节点
              break;
            case "close-all":
              treeTable.expandAll('IDfolderTypeTable', false); // 关闭全部节点
              break;
            case "btn-add":
              btnadd();
              break;
            case "btn-refresh":
              table.reloadData('IDfolderTypeTable');
              break;
          }
        });

        // 单元格工具事件--此处是 filter  不是 id
        treeTable.on('tool(folderTypeTable)', function (obj) {
          switch (obj.event) {
            case "edit":
              btn_edit(obj.data);
              break;
            case "del":
              btn_del(obj.data);
              break;
          }
        });

        //触发行单击事件
        treeTable.on('row(folderTypeTable)', function (obj) {
          var id = obj.data.id;
          if (obj.data.pid == 0 && id > 1) { id = '' }
          table.reloadData('pageTable', {
            where: {
              folder_type_id: id
            }
          });
          $('.layui-table-click').removeClass('layui-table-click');
          $(obj.tr).addClass('layui-table-click');
        });

        function btnadd() {
          kaige.form({
            url: "/sys.FolderType/add",
            data: {},
            id: 'kaige',
            area: ['500px', '360px'],
            title: '<i class="layui-icon layui-icon-add-circle"></i> 添加',
            encode: 1,
            overflow: true,
            callbefore: function (layero, index, res) {
              addeditform();
            },
            callback: function (res) {
              res.status && table.reloadData('IDfolderTypeTable');
            }
          });
        }

        function btn_edit(d) {
          kaige.form({
            title: '<i class="layui-icon layui-icon-edit"></i> 编辑'
            , url: '/sys.FolderType/edit'
            , data: { id: d.id }
            , id: 'kaige'
            , area: ['500px', '360px']
            , encode: 1
            , overflow: true
            , callbefore: function () {
              addeditform();
            }
            , callback: function (res) {
              res.status && treeTable.reloadData('IDfolderTypeTable');
            }
          });
        }

        function btn_del(d) {
          layer.confirm('真的要删除么', { icon: 3, title: '名称：' + d.name }, function (index) {
            $.post('/sys.FolderType/del', { id: d.id }, function (res) {
              if (res.status) {
                layer.msg(res.msg, { time: 1000 }, function () {
                  treeTable.reloadData('IDfolderTypeTable');
                  layer.close(index);
                });
              } else {
                layer.msg(res.msg);
              }
            });
          });
        }

        function addeditform() {
          //上级
          kaige.xmSelectTree({
            id: 'foldertype_id',
            url: '/select/foldertypetree',
            udata: { automatch: 1 },
            radio: true,
            clickClose: true
          });
        }

        //加载列表
        kaige.table({
          elem: '#pageTable',
          title: '物品列表',
          url: "/sys.folder/index",
          id: 'pageTable',
          toolbar: '#dtoolbar',
          defaultToolbar: ['filter', {
            title: '帮助'
            , layEvent: 'help'
            , icon: 'layui-icon-tips'
          }],
          where: {
            folder_type_id: 0
          },
          cols: [[
            { type: 'checkbox', fixed: 'left' },
            { type: 'numbers', title: '序号' },
            {
              field: 'file_ext', title: '标识图', width: 120, align: 'center', templet: function (d) {
                return file_type_icon(d);
              }
            },
            { field: 'id', title: 'ID', align: 'center', width: 80,hide:true },            
            { field: 're_name', title: '文件名称', align: 'center', width: 200 },
            { field: 'name', title: '原名称', align: 'center', width: 200,hide:true },
            { field: 'file_size_cn', title: '文件大小', align: 'center', width: 100 },
            { field: 'file_ext', title: '文件类型', align: 'center', width: 100 },
            { field: 'folder_type_id_name', title: '所属文件夹', align: 'center', width: 120 },
            { field: 'sort', title: '排序', align: 'center', width: 80, sort: true },
            { field: 'download_count', title: '下载次数', align: 'center', width: 100 },
            { title: '操作', toolbar: '#dtrbar', align: 'center', fixed: 'right', width: 170 }
          ]],
          done: function (res, curr, count) {
            if (loadnum < 1) {
              searchInit();
              loadnum++;
            }
          }
        });

        //列表-监听表头工具栏事件dtoolbar
        table.on('toolbar(pageTable)', function (obj) {
          // var checkStatus = table.checkStatus(obj.config.id);
          switch (obj.event) {
            case 'btn-refresh':
              table.reloadData('pageTable');
              break;
            case 'btn-add':
              btn_add2();
              break;
            case 'help':
              layer.msg('双击可以打开详情页');
              break;
          }
        });

        //监听行双击事件
        table.on('rowDouble(pageTable)', function (obj) {
          // console.log(obj);
          btn_look2(obj.data);
        });

        // 单元格工具事件--此处是 filter  不是 id
        table.on('tool(pageTable)', function (obj) {
          switch (obj.event) {
            case "look":
              btn_look2(obj.data);
              break;
            case "edit":
              btn_edit2(obj.data);
              break;
            case "del":
              btn_del2(obj.data);
              break;
          }
        });

        /**向服务端发送请求排序*/
        table.on('sort(pageTable)', function (obj) {
          table.reloadData('pageTable', {
            initSort: obj
            , where: {
              sortfield: obj.field
              , sortord: obj.type
            }
            , page: {
              curr: 1
            }
          }, true);
        });

        function searchInit() {
          form.on('submit(search-btn-submit)', function (data) {
            $where = data.field;
            uwhere = {};
            for (var i in $where) {
              uwhere[i] = $where[i] ? encodeURIComponent($where[i]) : '';
            }
            table.reloadData('pageTable', {
              page: {
                curr: 1
              }
              , where: uwhere
            }, true);
            return false;
          });
        }

        function btn_add2(d) {
          kaige.form({
            title: '<i class="layui-icon layui-icon-add-circle"></i> 添加'
            , url: '/sys.folder/add' //数据源
            , data: {}
            , id: 'folder'
            , area: ['700px', '550px']
            , encode: 1
            , callbefore: function () {
              addeditform2();
            }
            , callback: function (res) {
              res.status && table.reloadData('pageTable');
            },
          });
        }

        function btn_edit2(d) {
          kaige.form({
            title: '<i class="layui-icon layui-icon-edit"></i> 编辑'
            , url: '/sys.folder/edit' //数据源
            , data: { id: d.id }
            , id: 'folder'
            , area: ['700px', '550px']
            , encode: 1
            , callbefore: function () {
              addeditform2();
            }
            , callback: function (res) {
              res.status && table.reloadData('pageTable');
            },
          });
        }

        function btn_look2(d) {
          kaige.details({
            title: '<i class="layui-icon layui-icon-eye"></i> 查看'
            , url: '/sys.folder/look' //数据源
            , data: { id: d.id }
            , id: 'look'
            , area: ['700px', '550px']
            , overflow: 0
          });
        }

        function btn_del2(d) {
          layer.confirm('真的要删除么', { icon: 3, title: '名称：' + d.name }, function (index) {
            $.post('/sys.folder/del', { id: d.id }, function (res) {
              if (res.status) {
                layer.msg(res.msg, { time: 1000 }, function () {
                  table.reloadData('pageTable');
                  layer.close(index);
                });
              } else {
                layer.msg(res.msg);
              }
            });
          });
        }

        function addeditform2() {
          //分类
          kaige.xmSelectTree({
            id: 'folder_type_id',
            url: '/select/foldertypetree',
            udata: { automatch: 1 },
            radio: true,
            clickClose: true
          });

          //共享查看人员
          $("#look_user").on('click', function (e) {
            layer.open({
              title: '选择适用对象',
              content: szoa.client.path + '/pages/pmm/config/ugdc.html',
              area: ['690px', '470px'],
              type: 2,
              success: function (layero, index) {
                window.ugdcinfo = function (opt) {
                  $('#look_user').val(opt.names);
                  $('#look_user_id').val(opt.ids); // 隐藏的文本框存 id ,部门id(u1,u4),组id(g1,g2),部门根ID（c1,c9)与部门ID区别 根ID需要查找同所有子部门
                  layer.close(layer.index);
                }
              }
            });
          });

          $('#upload-files-btn').on('click', function (ev) {
            window.file_win_layid = layer.open({
              type: 2,
              title: '<i class="fa fa-upload"></i> 上传文件',
              shade: 0.5,
              area: ['90%', '90%'],
              content: szoa.client.path + '/pages/files/upfiles.html?id=7',
              success: function (layero, index) {
                window.file_info = function (opt) {
                  if (opt) {
                    if (opt.id) {
                      $.get('/files/getfileinfo', { id: opt.id }, function (res) {
                        if (res.status) {
                          $('#files_id').val(res.data.id);
                          $('#old_name').text(res.data.name);
                          $('#re_name').val(res.data.name);
                          $('#file_ext').text(res.data.file_ext);
                          $('#file_size_cn').text(res.data.file_size_cn);
                          $('#hash').text(res.data.hash);
                        }
                      });
                    }
                  }
                  layer.close(window.file_win_layid);
                };
              }
            });
          });

        }

      });
    });
  </script>

  <script type="text/html" id="dtoolbar">
    <div class="layui-inline">
      <input class="layui-input tsinput" name="keywords" placeholder="名称">
      <button class="tsbutton" lay-submit lay-filter="search-btn-submit" title="筛选"><i class="layui-icon layui-icon-search"></i></button>
    </div>
    <div class="layui-btn-group">
      <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="btn-add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
      <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="btn-refresh"><i class="fa fa-refresh"></i> 刷新</button>
    </div>
  </script>
  <script type="text/html" id="dtrbar">
    <div class="layui-btn-group">
      <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="look" title="查看"><i class="layui-icon layui-icon-eye"></i></a>
      <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></a>
      <a class="layui-btn layui-bg-red layui-btn-sm"  lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i></a>      
    </div>
  </script>

  <script type="text/html" id="TPL-treeTable-header">
    <div class="layui-btn-group">
      <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="btn-add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
      <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="btn-refresh"><i class="fa fa-refresh"></i> 刷新</button>
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="open-all" title="全展开"><i class="layui-icon layui-icon-down"></i> 全展开</button>
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-event="close-all" title="全关闭"><i class="layui-icon layui-icon-right"></i> 全收缩</button>
    </div>
  </script>
  <script type="text/html" id="TPL-treeTable-tdbar">
    {{# if(d.id > 1){ }}
    <div class="layui-btn-group">
    <a class="layui-btn layui-bg-blue layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    <a class="layui-btn layui-bg-red layui-btn-sm"  lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
    </div>
    {{# } }}
  </script>

  <script id="kaige_form_html" type="text/html">
    <form class="layui-form layui-form-pane kaige-body-form" lay-filter="kaige_form_lay_filter">
      {{# if(d.id){ }}
      <input type="hidden" name="id" value="{{ d.id }}" />
      <input type="hidden" name="user_id" value="{{ d.user_id }}" />
      {{# } }}
      <div class="layui-form-item">
        <label class="layui-form-label">上级</label>
        <div class="layui-input-inline">
          <div id="foldertype_id_select_box"></div>
          <input type="hidden" id="foldertype_id_name" name="foldertype_id_name" />
          <input type="hidden" id="foldertype_id" value="{{ d.pid || '' }}" name="pid" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label fl-red">名称</label>
        <div class="layui-input-inline">
          <input type="text" name="name" value="{{ d.name || '' }}" lay-verify="required" autocomplete="off" class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">文件夹描述</label>
        <div class="layui-input-block">
          <textarea name="explain" class="layui-textarea">{{ d.explain || '' }}</textarea>
        </div>
      </div>
      <div class="layui-form-item layui-hide">
        <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据</button>
      </div>
    </form>
  </script>
  <!-- r表单 -->
  <script type="text/html" id="folder_form_html">
    <form class="layui-form layui-form-pane kaige-body-form" style="padding: 5px;" lay-filter="folder_form_lay_filter">
      {{# if(d.id){ }}
      <input type="hidden" name="id" value="{{ d.id }}" />
      <input type="hidden" name="user_id" value="{{ d.user_id }}" />
      {{# } }}
      <div class="layui-form-item">
        <label class="layui-form-label fl-red">所属文件夹</label>
        <div class="layui-input-inline">
          <div id="folder_type_id_select_box"></div>
          <input type="hidden" id="folder_type_id_name" />
          <input type="hidden" id="folder_type_id" value="{{ d.folder_type_id || '' }}" name="folder_type_id"  lay-verify="required" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">文件</label>
        <div class="layui-input-inline">
          <a class="layui-btn layui-btn-sm" id="upload-files-btn" style="margin-top: 5px;margin-left: 10px;">上传文件</a>
        </div>
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline">
          <input name="sort" value="{{ typeof(d.sort)==='number' ? d.sort : '' }}" class="layui-input" type="number">
        </div>
      </div>
      <fieldset class="layui-elem-field layui-field-title" style="padding: 10px;">
        <legend style="font-size:14px;">文件信息</legend>
        <div class="layui-form-item">
          <label class="layui-form-label">原名称</label>
          <div class="layui-form-mid layui-text-em" id="old_name">{{ d.name || '' }}</div>
          <input type="hidden" id="files_id" name="files_id" value="{{ d.files_id || '' }}" />
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label fl-red">重新命名</label>
          <div class="layui-input-inline" style="width: 300px;">
            <input name="re_name" id="re_name" value="{{ d.re_name || d.name || '' }}"  lay-verify="required" class="layui-input" type="text">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">文件类型</label>
          <div class="layui-form-mid layui-text-em" id="file_ext">{{ d.file_ext || '' }}</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">文件大小</label>
          <div class="layui-form-mid layui-text-em" id="file_size_cn">{{ d.file_size_cn || '' }}</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">HASH</label>
          <div class="layui-form-mid layui-text-em" id="hash">{{ d.hash || '' }}</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">共享查看</label>
          <div class="layui-input-block">
            <input name="look_user" id="look_user" value="{{ d.look_user || '' }}" class="layui-input" type="text">
            <input name="look_user_id" id="look_user_id" value="{{ d.look_user_id || '' }}" type="hidden">
          </div>
        </div>
      </fieldset>
      <div class="layui-form-item layui-hide">
        <button class="layui-hide" lay-submit="" id="folder_form_btn_save" lay-filter="folder_form_btn_save">保存数据</button>
      </div>
    </form>
  </script>

  <script type="text/html" id="look_form_html">
    <div class="kaige-body">
      <table class="layui-table">
        <tr>
          <td style="width: 120px;">所属文件夹</td>
          <td>{{ d.folder_type_id_name || "无" }}</td>
        </tr>
        <tr>
          <td>标识图</td>
          <td>{{- file_type_icon(d) }}</td>
        </tr>
        <tr>
          <td>文件名称</td>
          <td>{{ d.re_name }} ({{ d.name }})</td>
        </tr>
        <tr>
          <td>排序</td>
          <td>{{ typeof(d.sort)==='number' ? d.sort : '' }}</td>
        </tr>
        <tr>
          <td>文件类型</td>
          <td>{{ d.file_ext }}</td>
        </tr>
        <tr>
          <td>文件大小</td>
          <td>{{ d.file_size_cn }}</td>
        </tr>
        <tr>
          <td>HASH</td>
          <td>{{ d.hash }}</td>
        </tr>
        <tr>
          <td>共享查看</td>
          <td>{{ d.look_user }}</td>
        </tr>
      </table>      
    </div>
  </script>
</body>

</html>